Component({
    properties: {},
    data: {
        isHiddenMenuDrawer: true,
        isHiddenMask: true,
        menu: [
            {
                name: '菜单1',
                content: ['菜单1内容1', '菜单1内容2', '菜单1内容3']
            },
            {
                name: '菜单2',
                content: ['菜单2内容1', '菜单2内容2', '菜单2内容3']
            },
            {
                name: '菜单3',
                content: ['菜单3内容1', '菜单3内容2', '菜单3内容3']
            }
        ],
        selectedMenuIndex: 0,
        selectedContentIndexes: []
    },
    methods: {
        openDrawerMenu() {
            this.setData({
                isHiddenMenuDrawer: !this.data.isHiddenMenuDrawer,
                isHiddenMask: !this.data.isHiddenMask
            })
        },
        selectMenu(e) {
            // 1. 获取选择菜单栏的索引
            const selectedMenuIndex = e.currentTarget.dataset.index
            // 2. 更新 selectedMenuIndex
            this.setData({
                selectedMenuIndex,
                // 每次切换菜单栏时将选中的内容清空
                selectedContentIndexes: []
            })
        },
        selectContent(e) {
            const index = e.currentTarget.dataset.index
            const selectedContentIndexes = this.data.selectedContentIndexes
            if (selectedContentIndexes.includes(index)) {
                selectedContentIndexes.splice(selectedContentIndexes.indexOf(index), 1)
            } else {
                selectedContentIndexes.push(index);
            }
            this.setData({
                selectedContentIndexes
            })
        },
        getSelectedItems() {
            const selectedMenuList = this.data.menu[this.data.selectedMenuIndex].name
            console.log("选中的菜单栏: ", selectedMenuList)

            const selectedContentList = this.data.selectedContentIndexes.map(index => {
                return this.data.menu[this.data.selectedMenuIndex].content[index];
            });
            console.log("选中的菜单栏内容: ", selectedContentList)
        },
        cancel() {
            this.setData({
                // 清空选中的内容
                selectedContentIndexes: [],
                isHiddenMenuDrawer: !this.data.isHiddenMenuDrawer,
                isHiddenMask: !this.data.isHiddenMask,
            })
        },
        clickMask() {
            this.setData({
                isHiddenMenuDrawer: !this.data.isHiddenMenuDrawer,
                isHiddenMask: !this.data.isHiddenMask,
            })
        }
    }
});
